<template>
  <div class="title">网站分析</div>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  name: 'BarChart',
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const chartContainer = ref(null);

    onMounted(() => {
      if (chartContainer.value) {
        const chart = echarts.init(chartContainer.value);

        const option = {
          tooltip: {},
          legend: {
            data: ['网站浏览量', '视频播放量'],
            bottom: 0, // 将图例移动到底部
          },
          xAxis: {
            type: 'category',
            data: props.data.labels,
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: '网站浏览量',
              type: 'bar',
              data: props.data.views,
              itemStyle: {
                color: 'rgba(54, 162, 235, 0.6)',
                barBorderRadius: [10, 10, 0, 0], // 顶部圆角
              },
              barWidth: 10, // 调整柱形宽度
              // barGap: '5px', // 同类别柱形之间的间隙
              // barCategoryGap: '5px', // 不同类别之间的间隙
            },
            {
              name: '视频播放量',
              type: 'bar',
              data: props.data.plays,
              itemStyle: {
                color: 'rgba(255, 99, 132, 0.6)',
                barBorderRadius: [10, 10, 0, 0], // 顶部圆角
              },
              barWidth: 10, // 调整柱形宽度
              // barGap: '5px', // 同类别柱形之间的间隙
              // barCategoryGap: '5px', // 不同类别之间的间隙
            },
          ],
        };

        chart.setOption(option);

        window.addEventListener('resize', () => {
          chart.resize();
        });
      } else {
        console.error('Chart container is not available');
      }
    });

    return {
      chartContainer,
    };
  },
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
